<template>
	<div class="container">
		<div class="content">
			<div class="tui-header-center">
				<image :src="userInfo.avatarPath  || '/static/icon/userIcon.png'" class="tui-avatar" mode="aspectFill" @click="$navSkin.toSetInfo()"></image>
				<div class="tui-info" @click="toSetUserInfo()">
					<div class="tui-nickname">
						{{userInfo.nickname}}
						<image v-if="userInfo.sex == 1" src="/static/icons/nan.png" mode=""></image>
						<image v-else src="/static/icons/nv.png" mode=""></image>
					</div>
					<div class="tui-explain">
						<span>关注：{{userInfo.followCount}}</span> <span>粉丝：{{userInfo.fansCount}}</span>
					</div>
				</div>
				<div class="tui-btn-edit">
					<image src="/static/icons/set.png" mode="" @click="$navSkin.toSetting()"></image>
					<image src="/static/icons/icon_tianjia.png" mode="" @click="$navSkin.toSearch()"></image>
				</div>
			</div>
			<div class="topic-header">
				<div class="left">
					<span>{{$utils.monthDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</span>
				</div>
				<div class="right">
					<div class="userInfo">
						<image class="user-img" :src="userInfo.avatarPath" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.myIndex || '000'}} </div>
					</div>
					<div class="userInfo">
						<image class="user-img" :src="userInfo.lastUpdateAvatar" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.lastUpdateIndex || '000' }}</div>
					</div>
				</div>
			</div>
			<div class="topic-body">
				<div class="section">
					<div class="title">我的影子</div>
					<div class="tab-section">
						<div class="tab-item" :class="{'active':timeCurrent == item.id}" v-for="(item,index) in timeTab" :key="index" @click="selectTime(item.id)">
							{{item.name}}
						</div>
		
					</div>
					<div class="user-section">
						<div class="left">
							<div class="my-wrapper">
								<div class="border-1" v-if="list[0]"></div>
								<div class="border-2" v-if="list[1]"></div>
								<div class="border-3" v-if="list[2]"></div>
								<div class="border-4" v-if="list[3]"></div>
								<image class="my-pic" :src="userInfo.avatarPath || '/static/icon/userIcon.png'" mode="aspectFill"></image>
							</div>
							<span class="name">本人</span>
					
						</div>
						<div class="right" v-if="list.length > 0">
							<div class="other-wrapper" v-if="list[0]">
								<div class="wrapper-left">
									<div class="pic">
										<image class="user-img" @click="tohisCircle(list[0].id)" :src="list[0].avatarPath || '/static/icon/userIcon.png'" mode="aspectFill"></image>
										<image class="add" src="/static/icons/icon_jia.png" mode="" @click.stop="tofriendRequest(list[0].id)"></image>
									</div>
									<span class="name">{{list[0].nickname}}</span>
								</div>
								<div class="wrapper-right">
									{{list[0].similarity}} 相似
								</div>
							</div>
							<div class="other-wrapper" v-if="list[1]">
								<div class="wrapper-left">
									<div class="pic">
										<image class="user-img" @click="tohisCircle(list[1].id)" :src="list[1].avatarPath || '/static/icon/userIcon.png'" mode="aspectFill"></image>
										<image class="add" src="/static/icons/icon_jia.png" mode="" @click.stop="tofriendRequest(list[1].id)"></image>
									</div>
									<span class="name">{{list[1].nickname}}</span>
								</div>
								<div class="wrapper-right">
									{{list[1].similarity}} 相似
								</div>
							</div>
							<div class="other-wrapper" v-if="list[2]">
								<div class="wrapper-left">
									<div class="pic">
										<image class="user-img"  @click="tohisCircle(list[2].id)" :src="list[2].avatarPath || '/static/icon/userIcon.png'" mode="aspectFill"></image>
										<image class="add" src="/static/icons/icon_jia.png" mode="" @click.stop="tofriendRequest(list[2].id)"></image>
									</div>
									<span class="name">{{list[2].nickname}}</span>
								</div>
								<div class="wrapper-right">
									{{list[2].similarity}} 相似
								</div>
							</div>
							<div class="other-wrapper" v-if="list[3]">
								<div class="wrapper-left">
									<div class="pic">
										<image class="user-img"  @click="tohisCircle(list[3].id)" :src="list[3].avatarPath || '/static/icon/userIcon.png'" mode="aspectFill"></image>
										<image class="add" src="/static/icons/icon_jia.png" mode="" @click.stop="tofriendRequest(list[3].id)"></image>
									</div>
									<span class="name">{{list[3].nickname}}</span>
								</div>
								<div class="wrapper-right">
									{{list[3].similarity}} 相似
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="tab-section" style="padding: 30rpx 40rpx;">
					<div class="tab-item active" @click="changePage()">
						换一换
					</div>
					<div class="tab-item active" @click="reset()">
						重置
					</div>	
				</div>
			</div>
		</div>
		<uni-popup ref="sendPopup" type="center" :maskClick="true">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<!-- <span class="num">{{formData.content.length}}/2000</span> -->
						<textarea maxlength="2000" v-model="formData.content" placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx" placeholder="这一刻的想法…" />
					</div>
					<div class="send-btn">
						发布
					</div>
				</div>
				<div class="upload-list">
					<div class="upload-item">
						<image mode="aspectFill" style="width: 60rpx;height: 60rpx;" :lazy-load="true" src="/static/icon/btn_mine_add.png" alt="" @click="handlerUpload()" />
					</div>
					<div class="upload-item" v-for="(item,index) in wordList" :key="index">
						<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="del(index)"></image>
						<image  :src="item.filePath" mode="aspectFill" @click="_previewImage(item.filePath)"></image>
					</div>
				</div>
				<div class="close" @click="closeSendPopup()">
					<image src="/static/icons/icon_guanbi.png" mode=""></image>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import data from '@/js/my/index/data.js';
import methods from '@/js/my/index/methods.js';
import { mapState } from 'vuex';
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
	data,
	methods,
	onLoad() {
		this.getPageList()
	},
	onShow() {
		this.getUserInfo()
	},
	onHide() {},
	onPullDownRefresh() {
		this.page = 1
		this.list_rows = 10
		this.list = []
		this.getPageList()
		uni.stopPullDownRefresh()
	},
	onReachBottom() {
		// this.getPageList()
	},
	computed: {
		...mapState(['navigationBarHeight', 'userInfo']),
		bgHeight() {
			// #ifdef APP-PLUS
			return 200
			// #endif
			return this.navigationBarHeight + uni.upx2px(300);
		}
	},
	components: {
		uniPopup
	}
};
</script>

<style scoped lang="scss">
@import '~@/style/my/index.scss';
</style>
